<template>
    <form class="signupform">
        <span class="label" v-text="Lang.forgot[lang][2]">手机号码</span>
        <hb-input @ipt="e_form" :formType="itype" :back="itype" />

        <span class="label" v-text="Lang.forgot[lang][6]">人机验证码</span>
        <div class="fcb">
            <hb-input class="imgcode ilbk" @ipt="e_form" formType="imgCode" back="imgvercode" />
            <img class="img" :src="imgCode" @click="api_getimg">
        </div>

        <span class="label" v-text="Lang.forgot[lang][3]">验证码</span>
        <hb-vercode @ipt="e_form" @clk="e_send" formType="phoneCode" back="phoneCode" :iclear="clearCodeTimer" />

        <span class="label" v-text="Lang.forgot[lang][2]">手机号码</span>
        <hb-input @ipt="e_form" :formType="itype" :back="itype" />

        <hb-button class="tjbtn" :txt="Lang.forgot[lang][5]" @clk="e_signup" />

        <hb-dialog v-if="msgback !== ''" @clk="e_closeDialog" class="dialog">
            <h3 class="hmsg" v-text="msgback"></h3>
        </hb-dialog>
    </form>
</template>

<script>
import Lang from './lang.js'
import {vpost, vlink} from '@api'
export default {
	name: 'signupform',
	data() {
		return {
			Lang,
			form: {
				phone: '',
				newPassword: '',
				imgCode: '',
				phoneCode: '',
			},
			check: {
				phone: false,
				imgCode: false,
				newPassword: false,
				phoneCode: false,
			},
			imgCode: '',
			clearCodeTimer: -1, // 清空发送验证码的计时器
			msgback: '', // 返回的弹窗提示消息
		}
	},
	props: ['itype'],
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
	},
	mounted() {
		this.api_getimg()
		// this.getInviteId()
	},
	methods: {
		e_closeDialog() {
			this.msgback = ''
			this.clearCodeTimer = 0
		},
		e_form(re, inputed, back) {
			this.check[back] = re
			this.form[back] = inputed
		},
		api_getimg() {
			this.imgCode = ''
			setTimeout(() => {
				let r = (Math.random() * 100) | 0
				this.imgCode = vlink.checkCode.signup.img + r
			}, 10)
		},
		e_send() {
			if (this.check[this.itype] !== true) {
				// this.msgback = "请输入正确的手机号/邮箱地址"
				this.msgback = this.Lang.checkCode[this.lang][0]
				return false
			}
			if (this.check.imgvercode !== true) {
				this.msgback = this.Lang.checkCode[this.lang][1]
				return false
			}
			this.api_send()
		},
		api_send() {
			let se = {
				type: 12,
				phone: this.form.phone,
				email: this.form.email,
				vcode: this.form.imgvercode,
			}
			vpost(vlink.checkCode.signup.phone, se).then(re => {
				this.msgback = re.msg
			})
		},
		e_signup() {},
	},
}
</script>

<style scoped>
.signupform {
	margin-top: 5px;
	margin-bottom: 40px;
}

.label {
	display: inline-block;
	margin: 15px 0 5px;
	font-size: 14px;
	color: #61688a;
}
.btnbox {
	margin-top: 40px;
	align-items: center;
}
.forget {
	margin-left: 30px;
}
.readme {
	margin: 40px 0;
	align-items: flex-start;
	line-height: 20px;
	font-size: 16px;
	color: var(--clr0);
	user-select: none;
}
.readmeLink {
	color: var(--clr1);
}
.imgcode {
	margin-right: 20px;
	flex-grow: 1;
}
.img {
	border-radius: 4px;
	height: 48px;
}
.dialog {
	color: var(--clr0);
}
.hmsg {
	padding: 0 20px;
}
.tjbtn {
	margin-top: 20px;
}
</style>